<template>
    <div>
        <el-card>
            <div slot="header">
                <h3>周边商品</h3>
            </div>
            <div class="list">
                <div class="item" v-for="item in list" :key="item.id">
                    <div class="img">
                        <el-image style="width: 120px; height: 120px" :src="item.thumb" fit="fit" lazy></el-image>
                    </div>
                    <div class="title text-hide-2">{{ item.title}}</div>
                    <div class="price">
                        <span class="text-red ml-10">￥{{ item.price}}</span>
                    </div>
                </div>
            </div>
            <el-empty description="暂无周边商品" v-if="list.length === 0"></el-empty>
        </el-card>
    </div>
</template>

<script>
import { getRelatedProduct } from '@/api/apis'
export default {
    name: "periphery",
    data () {
        return {
            url: '',
            loading: true,
            list: []
        }
    },
    mounted () {
        this.getList();
    },
    methods: {
        getList(){
            this.loading = true;
            getRelatedProduct({
                goods_id: this.$route.params.id
            }).then(res => {
                if (res.code === 1){
                    this.list = res.data
                }
                this.loading = false;
            })
        }
    }
}
</script>

<style lang="less" scoped>
/deep/.el-card__header {
    border-bottom: none;
    padding-bottom: 0;
}
.list {
    display: flex;
    flex-wrap: wrap;
    row-gap: 8px;
    column-gap: 20px;
    .item {
        width: 120px;
        text-align: center;
    }

    .img {
        position: relative;
        margin-bottom: 10px;
        border-radius: 10px;
        overflow: hidden;
        .el-image {
            display: block;
        }
    }
    .title {
        font-size: 14px;
        color: #333;
        height: 37px;
        margin-bottom: 10px;
    }

    .price {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
    }
}
</style>